<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    fetchRegistrationList,
    updateRegistrationStatus
} from '@/api/registration.js'
// 在组件顶部添加dayjs引入
import dayjs from 'dayjs'


// 挂号记录列表
const registrationList = ref([])

// 控制评分弹窗
const scoreDialogVisible = ref(false)
const currentRegistration = ref(null)
const score = ref(0)

// 获取挂号记录
const getRegistrationList = async () => {
    try {
        const res = await fetchRegistrationList()
        console.log('接口返回数据:', res.data) // 调试用
        registrationList.value = res.data
    } catch (error) {
        ElMessage.error('获取挂号记录失败')
    }
}

// 处理状态变更
const handleStatusChange = async (row) => {
    try {
        if (row.reStatus === '未就诊') {
            // 弹出评分框
            currentRegistration.value = row
            scoreDialogVisible.value = true
        }
    } catch (error) {
        ElMessage.error('操作失败')
    }
}

// 提交评分
const submitScore = async () => {
    try {
        await updateRegistrationStatus({
            reId: currentRegistration.value.reId,
            reStatus: '已就诊',
            reScore: score.value
        })
        ElMessage.success('状态更新成功')
        scoreDialogVisible.value = false
        await getRegistrationList()
    } catch (error) {
        ElMessage.error('提交评分失败')
    }
}

// 修改状态判断逻辑
const statusTagType = (status) => {
    switch (status) {
        case '已过号': return 'warning'
        case '已就诊': return 'success'
        default: return 'info'
    }
}

// 性别显示转换
const formatGender = (gender) => {
    const genderMap = {
        '男': '男',
        '女': '女'
    }
    return genderMap[gender] || '未知'
}

// 初始化加载数据
onMounted(() => {
    getRegistrationList()
})
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>就医记录</span>
            </div>
        </template>

        <el-table :data="registrationList" style="width: 100%">
            <!-- 修改所有el-table-column的prop字段 -->
            <el-table-column prop="reId" label="挂号ID" width="100" />
            <el-table-column prop="userName" label="姓名" width="120" />
            <el-table-column prop="reAge" label="年龄" width="80" />
            <el-table-column label="性别" width="80">
                <template #default="{ row }">
                    {{ formatGender(row.reSex) }}
                </template>
            </el-table-column>
            <el-table-column prop="deptName" label="科室" width="150" />
            <el-table-column prop="doctorName" label="医生" width="120" />
            <el-table-column prop="appointmentTime" label="预约时间" width="180">
                <template #default="{ row }">
                    {{ dayjs(row.appointmentTime).format('YYYY-MM-DD HH:mm') }}
                </template>
            </el-table-column>
            <el-table-column prop="reStatus" label="状态" width="120">
                <template #default="{ row }">
                    <el-tag :type="statusTagType(row.reStatus)">
                        {{ row.reStatus }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="reScore" label="评分" width="250">
                <template #default="{ row }">
                    <el-rate :model-value="row.reScore" disabled :max="10" show-score score-template="{value} 分"
                        :colors="['#99A9BF', '#F7BA2A', '#FF9900']" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="{ row }">
                    <el-button v-if="row.reStatus === '未就诊'" type="primary" size="small"
                        @click="handleStatusChange(row)">
                        确认就诊
                    </el-button>
                    <span v-else>-</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 评分弹窗 -->
        <el-dialog v-model="scoreDialogVisible" title="就诊评价" width="30%">
            <el-form label-width="80px">
                <el-form-item label="就诊评分" required>
                    <el-rate v-model="score" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" show-score :max="10" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="scoreDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitScore">提交</el-button>
            </template>
        </el-dialog>
    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>